<template>
  <h2>{{isShow }}</h2>
   标题： <input v-model="input" placeholder="请输入代办标题"/>
   日期： <input type="date" v-model="date" placeholder="年/月/日"/><br>
    <button class="sub" type="primary" @click="submit">提交</button><br>
    <button class="ad" type="primary" @click="add">添加</button><br>
  
  <table>
    <tr>
      <th>标题</th>
      <th>日期</th>
      <th>操作</th>
    </tr>
   
  <div style="height:300px;overflow-y: auto;" @scroll="onScroll">
    
    <div class="scroll" :style="{ height: list.length * 30 + 'px' }">
      
      <div class="placeholder" :style="{ height: currentIndex * 30 + 'px' }"></div>
      
    <tr class="item" v-for="(item,index) in list " :key="item">
      <td>{{item.title}}</td>
      <td>{{item.date}}</td>
      <td>
        <button type="primary" @click="edit(index)">编辑</button>
        <button type="primary" @click="del(index)">删除</button>
      </td>
    </tr>
  </div>
  </div>
  
  </table>
  
</template>

<script>
export default {
  data(){
    return{
      //1.初始化一个currentIndex
      currentIndex: 0,
      input:'',
      date:'',
      str:'',
      //获取本地存储的数据
      list:window.localStorage.getItem('list') ? JSON.parse(window.localStorage.getItem('list')) : [] 
    }
  },
  created(){
 
  
  },

 
computed:{
  displayArr(){
    //从currentIndex开始截取10个元素
    return this.list.slice(this.currentIndex,this.currentIndex+10)
  },
  isShow(){
    //如果str是编辑就返回编辑+input框里面的内容，否则返回添加
    return this.str==='编辑' ? `编辑${this.input}`||'' : '添加'
  }
},
  methods:{
    onScroll(e){
      //获取滚动的高度
      const scrollTop = e.target.scrollTop
      //把滚动的高度赋值给currentIndex
      this.currentIndex = Math.floor(scrollTop/30)
    },
      
    //提交
    submit(){
      //提交数据以后把数据存储到本地
      this.list.unshift({
        //把input框里面的内容赋值给title
        title:this.input,
        //把date框里面的内容赋值给date
        date:this.date,
        //把当前的时间赋值给id
        id:Date.now()
      })
      //提交数据以后存储到本地
      window.localStorage.setItem('list',JSON.stringify(this.list))
      //提交数据以后清空input框里面的内容
      this.input=''
      //提交数据以后清空日期框里面的内容  
      this.date=''
    },
    //添加
    add(){
      //添加的时候清空input框里面的内容
      this.input=''
      //添加的时候清空日期框里面的内容
      this.date=''
      //添加的时候把str改为添加
      this.str = '添加'
    },
    //删除
    del(index){
       //删除点击的那一项
      this.list.splice(index,1)
    },
    //编辑
    edit(index){
      //点击编辑的时候把str改为编辑
      this.str = `编辑`
      //把当前的标题赋值给input
      this.input = this.list[index].title
      //把当前的日期赋值给date
      this.date = this.list[index].date
    }
  }



 
}
</script>
<style >

table{
  border: 1px solid rgb(89, 86, 86);
  border-collapse: collapse;
  /* 让table在scroll里面滚动 */
  display: block;
  overflow: hidden;
  height: 300px;
  width: 500px;
 
}
input{
  margin-bottom: 30px;
}


button{
  text-align: center;
}
button.sub{
  margin-bottom: 30px;
}
button.ad{
  margin-bottom: 30px;
}
table tr th, table tr td {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
   width: 150px;
}

.scroll {
  height: 300px;
  overflow-y: auto;
  position: sticky;
  width: 500px;
}
</style>

